<template>
   <div>
      <div class="life">
           <div class="entertainment">
           </div>
           
           <div class="lifes">
                <div class="food">
                </div>
                <div class="attractions">
                </div>
           </div>
      </div>
   </div>

    
</template>

<script>
export default {
    name:'HomeLife'
}
</script>

<style scoped>
.life{
    overflow-x: hidden;
    display: flex; 
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    width:100%;
}
.lifes{
    display: flex; 
    margin-top:1%;
}
.entertainment{
    width:100%;
    height:150px;

    margin-top:10px;
    background:url(../../../assets/styles/images/娱乐.jpg) no-repeat;
    background-size:100% 150px;
   
}
.food{
    width:49%;
    height:100px;
  
    margin-top:10px;
    background:url(../../../assets/styles/images/美食.jpg) no-repeat;
    background-size:100% 100px;
      padding:5%;
    
}
.attractions{
    width:49%;
    height:100px;

    margin-top:10px;
    background:url(../../../assets/styles/images/景点.jpg) no-repeat;
    background-size:100% 100px; 
    align-items: center;
     justify-content: space-between;
     padding:5%;
     margin-left:1%;
}
</style>
